{% extends "base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "监控-告警分析 | 蓝鲸智云" %}</title>
    {{ block.super }}
{% endblock %}

{% block content %}
    <div class="page-content" style="width: 100%">
        <div class="bk-collapse-panel">
            <div class="panel-header" role="tab">
                <a data-toggle="collapse" class="panel-icon panel-spread"></a>
                <h3 data-toggle="collapse" class="panel-title" aria-expanded="true">业务告警日志</h3>
            </div>
            <div id="panel-content2" class="panel-body panel-collapse p0 collapse in" aria-expanded="true" style="">
                <table class="bk-table bk-table-header-bordered">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>IP</th>
                        <th>所属组件</th>
                        <th>告警时间</th>
                        <th>告警等级</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for fs in files %}
                        <tr>
                            <td>{{ fs.id }}</td>
                            <td>{{ fs.ip }}</td>
                            <td>{{ fs.file_list }}</td>
                            <td>{{ fs.file_num }}</td>
                            <td>{{ fs.file_size }}</td>
                            <td><a class="bk-text-button bk-info" title="立即备份">立即备份</a></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>


        <hr>
        获取告警中心信息并以机器维度进行告警分析数据统计
        配置告警策略，获取当前业务下的异常告警， 并根据当前业务的拓扑结构进行告警的统计分析
        <div class="bk-collapse-panel">
            <div class="bk-collapse-panel" style="float: left">
                <div class="panel-header" role="tab">
                    <a data-toggle="collapse" class="panel-icon panel-spread"></a>
                    <h3 data-toggle="collapse" class="panel-title" aria-expanded="true">告警趋势</h3>
                </div>
                <div id="warnings_dest" style="height: 400px;width: 500px;"></div>
            </div>
            <div class="bk-collapse-panel" style="float: right">
                <div class="panel-header" role="tab">
                    <a data-toggle="collapse" class="panel-icon panel-spread"></a>
                    <h3 data-toggle="collapse" class="panel-title" aria-expanded="true">业务告警统计</h3>
                </div>
                <div id="biz_warnings" style="height: 400px;width: 500px;"></div>
            </div>
            <div class="bk-collapse-panel">
                <div class="panel-header" role="tab">
                    <a data-toggle="collapse" class="panel-icon panel-spread"></a>
                    <h3 data-toggle="collapse" class="panel-title" aria-expanded="true">主机告警统计</h3>
                </div>
                <div id="host_warnings" style="height: 400px;width: 500px;"></div>
            </div>
        </div>


        <div class="bk-collapse-panel">
            <div class="panel-header" role="tab">
                <a data-toggle="collapse" class="panel-icon panel-spread"></a>
                <h3 data-toggle="collapse" class="panel-title" aria-expanded="true">异常告警日志</h3>
            </div>
            <div id="panel-content2" class="panel-body panel-collapse p0 collapse in" aria-expanded="true" style="">
                <table class="bk-table bk-table-header-bordered">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>IP</th>
                        <th>所属组件</th>
                        <th>告警时间</th>
                        <th>告警等级</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for fs in files %}
                        <tr>
                            <td>{{ fs.id }}</td>
                            <td>{{ fs.ip }}</td>
                            <td>{{ fs.file_list }}</td>
                            <td>{{ fs.file_num }}</td>
                            <td>{{ fs.file_size }}</td>
                            <td><a class="bk-text-button bk-info" title="立即备份">立即备份</a></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var dom = document.getElementById('warnings_dest');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};

        var option;

        option = {
            xAxis: {
                type: 'category',
                data: ['10-18', '10-19', '10-20', '10-21', '10-22', '10-23', '10-24', '10-25', '10-26', '10-27', '10-28', '10-29', '10-30', '10-31']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        window.addEventListener('resize', myChart.resize);
    </script>
    <script type="text/javascript">
        var dom = document.getElementById('biz_warnings');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};

        var option;

        option = {
            color: ['#C60005', '#CEA500', '#F7DF1E'],
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', 'CRITICAL', 'ERROR', 'WARNING'],
                source: [
                    {product: '小游戏服务', "CRITICAL": 43, "ERROR": 85, "WARNING": 93},
                    {product: '登录注册服务', "CRITICAL": 83, "ERROR": 73, "WARNING": 55},
                    {product: '数据库', "CRITICAL": 86, "ERROR": 10, "WARNING": 82}
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        window.addEventListener('resize', myChart.resize);
    </script>
    <script type="text/javascript">
        var dom = document.getElementById('host_warnings');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};

        var option;

        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
    </script>
{% endblock %}
